<template>
    <div>
        <!-- 搜索栏 -->
        <el-card class="!border-none mb-4" shadow="never">
            <el-form class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="用户编号" prop="title">
                    <el-input
                        v-model="queryParams.user_sn"
                        class="w-[250px]"
                        placeholder="请输入用户编号"
                        clearable
                        @keyup.enter="resetPaging"
                    />
                </el-form-item>
                <el-form-item label="绘图类型">
                    <el-select v-model="queryParams.status" class="w-[250px]">
                        <el-option value="" label="全部" />
                        <el-option value="0" label="文生图" />
                        <el-option value="1" label="图生图" />
                        <el-option value="2" label="图放大" />
                        <el-option value="3" label="图变换" />
                    </el-select>
                </el-form-item>
                <el-form-item label="生成状态">
                    <el-select v-model="queryParams.status" class="w-[250px]">
                        <el-option value="" label="全部" />
                        <el-option value="0" label="待生成" />
                        <el-option value="1" label="生成中" />
                        <el-option value="2" label="成功" />
                        <el-option value="3" label="失败" />
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <date-picker
                        v-model:startTime="queryParams.start_time"
                        v-model:endTime="queryParams.end_time"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPaging">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 表格栏 -->
        <el-card v-loading="pager.loading" class="!border-none" shadow="never">
            <el-table :data="pager.lists" size="large" class="mt-4">
                <el-table-column label="用户信息" min-width="150">
                    <template #default="{ row }">
                        <div class="flex items-center">
                            <el-avatar :size="36" :src="row.user.avatar" class="shrink-0" />
                            <div class="ml-2">
                                <p>{{ row?.user.nickname }}</p>
                                <p class="text-xs text-tx-placeholder">{{ row?.user?.sn }}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="提示词" prop="prompt" min-width="120">
                    <template #default="{ row }">
                        <popup title="提示词" cancelButtonText="" confirmButtonText="">
                            <template #trigger>
                                <div class="line-clamp-2 cursor-pointer">
                                    {{ row?.prompt }}
                                </div>
                            </template>
                            <div class="p-4">
                                <div>
                                    <div class="font-bold mb-1">输入提示词：</div>
                                    <div class="bg-page rounded-md p-2">
                                        {{ row?.prompt }}
                                    </div>
                                </div>
                                <div v-if="row?.prompt_en" class="mt-3">
                                    <div class="font-bold mb-1">翻译提示词：</div>
                                    <div class="bg-page rounded-md p-2">
                                        {{ row?.prompt }}
                                    </div>
                                </div>
                            </div>
                        </popup>
                    </template>
                </el-table-column>
                <el-table-column label="生成结果" prop="thumbnail" min-width="80">
                    <template #default="{ row }">
                        <photos
                            v-if="row.status === 2"
                            :src="row.thumbnail"
                            :width="64"
                            :height="64"
                            :preview-src-list="[row.image_loc]"
                            :preview-teleported="true"
                            fit="contain"
                        />
                        <div v-if="row.status === 0 || row.status === 1"
                             class="flex items-center justify-center text-xs
                                    text-tx-placeholder bg-page w-[64px] h-[64px]">
                            <span v-if="row.status === 0">待生成</span>
                            <span v-if="row.status === 1">生成中</span>
                        </div>
                        <div v-if="row.status === 3"
                             class="flex items-center justify-center text-xs
                                    text-error bg-page w-[64px] h-[64px] cursor-pointer"
                             @click="feedback.alertError('生成失败: ' + row?.fail_reason)"
                        >
                            <span>失败了</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="消耗积分" prop="points" min-width="100" />
                <el-table-column label="图片比例" prop="type" min-width="80">
                    <template #default="{ row }">
                        <el-tag type="info">{{ row?.scale }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="绘图类型" min-width="80">
                    <template #default="{ row }">
                        <el-tag v-if="row.type === 'text2img'" type="info">文生图</el-tag>
                        <el-tag v-if="row.type === 'img2img'" type="info">图生图</el-tag>
                        <el-tag v-if="row.type === 'upscale2img'" type="info">图放大</el-tag>
                        <el-tag v-if="row.type === 'variation2img'" type="info">图变换</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="生成状态" prop="status" min-width="80">
                    <template #default="{ row }">
                        <el-tag v-if="row.status === 0" type="info">等待生成</el-tag>
                        <el-tag v-if="row.status === 1" type="warning">正在生成</el-tag>
                        <el-tag v-if="row.status === 2" type="success">生成成功</el-tag>
                        <el-tag
                            v-if="row.status === 3"
                            type="danger"
                            class="cursor-pointer"
                            @click="feedback.alertError('生成失败: ' + row?.fail_reason)"
                        >
                            生成失败
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="create_time" min-width="170" />
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button
                            v-perms="['draws:record:delete']"
                            type="danger"
                            link
                            @click="handleDelete(row.id)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <paging v-model="pager" @change="queryLists" />
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import drawsRecordApi from '@/api/apply/draws/record'

// 查询参数
const queryParams = reactive({
    engine: 'sd',
    type: '',
    status: '',
    user_sn: '',
    start_time: '',
    end_time: ''
})

// 分页查询
const { pager, queryLists, resetParams, resetPaging } = usePaging({
    fetchFun: drawsRecordApi.lists,
    params: queryParams
})

/**
 * 处理删除
 *
 * @param {number} id
 * @returns {Promise<void>}
 */
const handleDelete = async (id: number): Promise<void> => {
    feedback.confirm('确定要删除此项数据吗?')
        .then(async () => {
            await drawsRecordApi.delete({ api: 'mj', id: id })
            feedback.msgSuccess('删除成功')
            await queryLists()
        }).catch(() => {})
}

onMounted(async () => {
    await queryLists()
})
</script>
